<template>
    <el-dialog class="ui-cashout-set-dialog" v-model="dialogVisible" :modal="true" @closed="finalThings" title="提现账号设置">
        <el-form :rules="rules" ref="elForm" :model="data" size="small" label-width="8rem">
            <el-form-item label="银行卡号: " prop="bank_card">
                <el-input type="text" v-model="data.bank_card" @change="changeCash" v-digit-only></el-input>
            </el-form-item>
            <div class="bank_type">
                <div>银行类型: </div>
                <div>{{ data.bank_type }}</div>
            </div>
            <el-form-item label="开户行: " prop="owner_bank">
                <el-input type="text" v-model="data.owner_bank"></el-input>
            </el-form-item>
            <el-form-item label="持卡人姓名: " prop="owner_name">
                <el-input type="text" v-model="data.owner_name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码: " prop="owner_idcard">
                <el-input type="text" v-model="data.owner_idcard"></el-input>
            </el-form-item>
            <el-form-item label="联系电话: " prop="tel">
                <el-input type="text" v-model="data.tel" v-digit-only></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="身份信息:" prop="idcard_front_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="idcard_front_photo">
                            <img v-if="data.idcard_front_photo" :src="'https://timg.80mall.net/nb/' + data.idcard_front_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">身份证正面</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="idcard_back_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="idcard_back_photo">
                            <img v-if="data.idcard_back_photo" :src="'https://timg.80mall.net/nb/' + data.idcard_back_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">身份证反面</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="user_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="user_photo">
                            <img v-if="data.user_photo" :src="'https://timg.80mall.net/nb/' + data.user_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">手持身份证</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="6">
                    <el-form-item label="银行卡照片:" prop="bank_front_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="bank_front_photo">
                            <img v-if="data.bank_front_photo" :src="'https://timg.80mall.net/nb/' + data.bank_front_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">银行卡正面照</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="bank_back_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="bank_back_photo">
                            <img v-if="data.bank_back_photo" :src="'https://timg.80mall.net/nb/' + data.bank_back_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">银行卡反面照</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="结算标志:" class="select">
                <el-radio-group v-model="data.checked">
                    <el-radio :label="true" size="large">法人结算</el-radio>
                    <el-radio :label="false" size="large">非法人结算</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-row>
                <el-col :span="6">
                    <el-form-item prop="agreement_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="agreement_photo">
                            <img v-if="data.agreement_photo" :src="'https://timg.80mall.net/nb/' + data.agreement_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">结算确认书</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="6" v-if="!data.checked">
                    <el-form-item prop="authorize_photo" class="rules-info">
                        <el-upload
                            class="avatar-uploader"
                            action="https://file.80mall.net"
                            :show-file-list="false"
                            :http-request="uploadFile"
                            accept="image/png, image/jpeg, image/gif, image/jpg"
                            name="authorize_photo">
                            <img v-if="data.authorize_photo" :src="'https://timg.80mall.net/nb/' + data.authorize_photo" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <plus />
                                <span class="uploader-icon-title">商户委托书</span>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="box-row">
                <el-button type="danger" size="default" @click="onMandate(2)">下载结算确认书模板</el-button>
                <el-button v-if="!data.checked" type="danger" size="default" @click="onMandate(1)">下载商户委托书模板</el-button>
                <div style="flex: 1;"></div>
                <el-button type="primary" size="default" @click="onSure">保存</el-button>
                <el-button size="default" @click="onCancel">取消</el-button>
            </div>
            </template>
    </el-dialog>
</template>         
<script>
import { reactive,toRefs } from "vue";
import { exportDocx } from '../../../uiframe/downTable'
import bankcardinfo from '../../../uiframe/bankcardinfo'
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { uploader } from '../../../uiframe/extiio';
import axios from "axios";
import { idCardValidator,mobileValidator } from '../../../uiframe/validator';

export default {
    components: {
        Plus,
    },
    mounted() {
        let nav = window.navigator.userAgent
        if (nav.includes('chrome')>-1){
            this.isChrome = true
        } else {
            this.isChrome = false
        }
    },
    props:{
        q:Object,
        _compId:Number,
        done:Function,
        payload: Object
    },
    directives:{
        digitOnly:{
            mounted(el, binding){
                let input = el.querySelector('input');
                input.addEventListener('input', (e)=>{
                    if(!/^\d$/.test(e.data)){
                        input.value = input.value.replace(/[^\d]/g,'');
                    }
                })
            }
        },
    },
    setup(props) {
        let p = Object.assign(JSON.parse(JSON.stringify(props.payload)))
        p.checked = p.authorize_photo ? false : true;
        let data = reactive({
            dialogVisible: true,
            elForm:null,
            data:p,
            isChrome:true,
            rules:{
                bank_card: [{ required: true, message: "银行卡号必填", trigger: "blur" },],
                owner_bank:[{required:true,message:'开户行必填', trigger:'blur'}],
                owner_name:[{required:true,message:'户名必填', trigger:'blur'}],
                owner_idcard:[
                    {required:true,message:'身份证号码必填', trigger:'blur'},
                    {validator: idCardValidator, trigger: 'blur' }
                ],
                tel:[
                    {required:true,message:'联系电话必填', trigger:'blur'},
                    {validator: mobileValidator, trigger: 'blur' }
                ],
                idcard_front_photo:[{ required: true, message: "法人身份证正面不能为空.", trigger: "blur" }],
                idcard_back_photo:[{ required: true, message: "法人身份证反面不能为空.", trigger: "blur" }],
                user_photo:[{ required: true, message: "手持身份证不能为空.", trigger: "blur" }],
                authorize_photo:[{ required: true, message: "商户委托书不能为空.", trigger: "blur" }],
                agreement_photo:[{ required: true, message: "结算确认书不能为空.", trigger: "blur" }],
                bank_front_photo:[{ required: true, message: "银行卡正面照不能为空.", trigger: "blur" }],
                bank_back_photo:[{ required: true, message: "银行卡反面照不能为空.", trigger: "blur" }],
            }
        });

        const onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        methods = {
            onSure:()=>{
                data.elForm.validate().then(ret => {
                    if(!ret) return;

                    if(data.data.bank_type == ''){
                        onmessage({success:false,message:"未找到相应的银行类型！"})
                        return;
                    }

                    axios.post('/netbar/bankcard',data.data).then(({data:res})=>{
                        onmessage(res)
                        if(res.success){
                            props.q.resolve({success:true,message:'已保存', data: data.data});
                            data.dialogVisible = false
                        }
                    }).catch(res=>{
                        onmessage(res)
                    })
                }).catch(res=>{})
            },
            onCancel: ()=>data.dialogVisible = false,
            finalThings: () =>props.done(props._compId),
            uploadFile: (upload) => {
                if(data.data.stage == 2){
                    onmessage({success:false,message:"审核后，不能再继续上传图片！"});
                    return false;
                }

                return new Promise((resolve, reject)=>{
                    uploader(upload.action, upload.file, 'netbar_bank').then(({data:res})=>{
                        if(res.success){
                            data.data[upload.filename] = res.file;
                            resolve();
                        }else{
                            onmessage(res);
                            reject();
                        }
                    }).catch(e=>{
                        onmessage({success:false,message:"程序出错，请联系工作人员！"});
                        reject()
                    }).update(e=>{
                        upload.onProgress(e);
                    })
                })
            },
            onMandate:(i)=>{
                let url = i == 1 ? "/static/wt.docx" : "/static/settle.docx";
                exportDocx(url, {}, i == 1 ? `授权委托书.docx` : `结算账户收款确认书.docx`)
            },
            changeCash:(v)=>{
                let i = bankcardinfo(v);
                if(i == undefined){
                    data.data.bank_type = '';
                    onmessage({success:false,message:"未找到相应的银行类型！"})
                    return;
                }

                if(i.success){
                    let arr = ['DC','CC','SCC','PC']
                    if(arr.indexOf(i.cardType) > 0){
                        data.data.bank_type = '';
                        onmessage({success:false,message:"不支持该银行卡类型"})
                        return;
                    }

                    data.data.bank_type = i.bankName
                }else{
                    data.data.bank_type = '';
                    onmessage(i);
                }
            }
        }

        return {
            ...toRefs(data),
            ...methods
        }
    },
}
</script>
<style lang="scss">
.ui-cashout-set-dialog{
    max-width: 40rem;min-width: 40rem; width:40rem;
    margin-top: 5px;
    margin-bottom: 0;
    .el-dialog__body{
        padding: 0 1.5rem 0 .5rem;
        .select{
            .el-form-item__label{
                margin-top: 8px;
            }
        }
        .rules-info{
            .el-form-item__error{
                width: 150px;    
            }
        }
        .bank_type{
            display: flex;
            line-height: 28px;
            font-size: 14px;
            margin-bottom: 18px;
            div:first-child{
                width: 8rem;
                text-align: right;
                padding-right: 12px;
                box-sizing: border-box;
            }
        }
    }
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
}
.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
</style>